<template>
  <div>

    <SqlTable
        title="字典纲领"
        :columns="columns"
        :data-source="dataSource"
        @handleAdd="onAdd"
        @handleEdit="onEdit"
        @handleDelete="onDel"
        @handleDetail="onDet"
    >
      <a-form
          layout="inline"
          class="ant-advanced-search-form"
          :form="form"
          @submit="handleSearch"
      >
        <a-form-item label="索引值" v-bind="formItemLayout">
          <a-input v-decorator="['dictKey']"/>
        </a-form-item>
        <a-form-item label="名称" v-bind="formItemLayout">
          <a-input v-decorator="['dictLabel']"/>
        </a-form-item>
        <a-form-item v-bind="formItemLayout">
          <a-button type="primary" html-type="submit">
            搜索
          </a-button>
        </a-form-item>
      </a-form>
    </SqlTable>

    <a-modal
        title="字典纲领数据编辑"
        :visible="visible"
        :footer="null"
        @cancel="handleCancel"
        :maskClosable="false"
        :destroyOnClose="true"
    >
      <DictCatalogEdit :id="editId" @handlerSuccess="handleCancel"></DictCatalogEdit>
    </a-modal>
  </div>
</template>

<script>
  import SqlTable from "@/components/SqlTable";
  import DictCatalogEdit from "@/views/dict/DictCatalogEdit";
  import constants from "@/config/Constants";

  const columns = [
    {
      title: "索引值",
      width: 150,
      dataIndex: "dictKey",
      key: "dictKey",
      fixed: "left"
    },
    {title: "名称", dataIndex: "dictLabel", key: "dictLabel", width: 150},
    {title: "类型", dataIndex: "type", key: "type", width: 150},
    {title: "创建人", dataIndex: "author", key: "author", width: 150},
    // {title: "创建时间", dataIndex: "createTime", key: "createTime", width: 150},
    {title: "更新时间", dataIndex: "updateTime", key: "updateTime", width: 150},
    {title: "备注", dataIndex: "remarks", key: "remarks", width: 150}
  ];

  const dataSource = [];
  const dictTypeValue = new Map();

  export default {
    name: "DictCatalogList",
    components: {DictCatalogEdit, SqlTable},
    data() {
      return {
        columns,
        dataSource,
        visible: false,
        editId: "",
        dictTypeValue,

        form: this.$form.createForm(this, {name: "advanced_search"}),
        formItemLayout: {
          labelCol: {
            xs: {span: 24},
            sm: {span: 8}
          },
          wrapperCol: {
            xs: {span: 24},
            sm: {span: 16}
          }
        }
      };
    },
    mounted() {
      this.$services.system.dictItem.list({
        catalogKey: constants.dictTypeValue,
        pageIndex: 1,
        pageSize: 1000,
      }).then(res => {
        res.data.forEach(r => {
          this.dictTypeValue.set(r.itemKey, r.itemLabel);
        });
      });
      this.updateData();
    },
    methods: {
      handleSearch(e) {
        e.preventDefault();
        this.form.validateFieldsAndScroll((err, values) => {
          if (!err) {
            this.updateData(values);
          }
        });
      },

      handleReset() {
        this.form.resetFields();
      },

      onEdit(record) {
        this.visible = true;
        this.editId = record.id;
      },

      onDel(record) {
        this.$services.system.dictCatalog.delete({data: {id: record.id}}).then(res => {
          if (res) {
            this.$message.success('成功删除字典：' + record.dictLabel);
            this.updateData();
          }
        });
      },

      onDet(record) {
        console.log(record);
      },

      onAdd() {
        this.editId = null;
        this.visible = true;
      },

      handleCancel() {
        console.log("这是一个父组件方法")

        this.visible = false;
        this.updateData();
      },

      updateData(params) {
        this.dataSource = [];
        this.$services.system.dictCatalog
          .list({
            params: {
              pageIndex: 1,
              pageSize: 10,
              ...params
            }
          })
          .then(res => {
            res.data.forEach(d => {
              this.dataSource.push({
                key: d.id,
                ...d,
                type: this.dictTypeValue.get(d.type),
              });
            });

            console.log(this.dataSource);
          });
      }
    }
  };
</script>

<style scoped>
  .ant-advanced-search-form {
    padding: 12px 12px 0px 12px;
    background: #fbfbfb;
    border: 1px solid #d9d9d9;
    border-radius: 10px;
  }

  /*.ant-advanced-search-form .ant-form-item {*/
  /*  display: flex;*/
  /*}*/

  /*.ant-advanced-search-form .ant-form-item-control-wrapper {*/
  /*  flex: 1;*/
  /*}*/
</style>
